@import "~@/scss/__init.scss";

.c-svg-icon-menu {
  @include square(40px);
  display: inline-block;
  vertical-align: middle;

  svg.icon-menu {
    animation: 1s svgIconMenuShow;

    line {
      transform-origin: center;
      transition: 0.4s all ease;
    }

    &:hover {
      line {
        stroke: $colorActive;
      }
    }

    &.on-open {
      line {
        stroke: $colorActive;
      }

      .line-top {
        transform: translate(-6px,6px) rotate(45deg);
      }

      .line-middle {
        opacity: 0;
      }

      .line-bottom {
        transform: translate(8px,6px) rotate(135deg);
      }
    }
  }
}
